<template>
  <div class="lo">
    <!-- 顶部 -->
    <div class="top">
      <img
        src='../../assets/images/返回 (2).png'
        alt=""
      >
    </div>
    <div class="join">欢迎加入</div>
    <!-- 表单内容 -->
    <form action="">
      <input
        class="tel"
        type="text"
        placeholder="请输入手机号"
      >
      <!-- <hr> -->
      <input
        class="psw"
        type="text"
        placeholder="请输入密码"
      >
      <!-- <hr> -->
    </form>

    <!-- 短信验证 -->
    <div class="mes">
      <img
        src="../../assets/images/返回 (2).png"
        alt=""
      >
      <span class="l">短信验证登录</span>
      <span class="r">忘记密码</span>
    </div>

    <!-- 登录 -->
    <button class="login">登录</button>

    <!-- 注册功能 -->
    <div class="res">
      <span>没有账号？<a href="#">去注册</a></span>
    </div>

    <!-- 第三方登录 -->
    <h3 class="three">
      第三方登录
      <!-- 此处有图标 -->
    </h3>
  </div>
</template>

<script>
export default {

}
</script>

<style>
/* 登录页面 */
.lo {
  padding: 0.266667rem /* 20/75 */;
}
/* 顶部 */
.top {
  display: flex;
  padding: 10px 10px;
  font-size: 1.1em;
  margin-bottom: 0.026667rem /* 2/75 */;
  /* background-color: rgb(179, 17, 17); */
  justify-content: space-between;
}
/* 标题 */
.join {
  width: 2.133333rem /* 160/75 */;
  height: 0.8rem /* 60/75 */;
  margin-top: 0.666667rem /* 50/75 */;
  font-size: 0.4rem /* 30/75 */;
}
/* 手机号 + 密码 */
.tel,
.psw {
  font-size: 0.24rem /* 18/75 */;
  color: #ccc;
  height: 0.4rem /* 30/75 */;
  display: block;
  margin-top: 0.266667rem /* 20/75 */;
}
/* 短信验证 */
.mes {
  height: 1.066667rem /* 80/75 */;
  line-height: 1.066667rem /* 80/75 */;
  font-size: 0.24rem /* 18/75 */;
}
/* 登录按钮 */
.login {
  width: 5.333333rem /* 400/75 */;
  height: 0.666667rem /* 50/75 */;
  margin: 0 auto;
  background-color: orange;
  border-radius: 0.066667rem; /* 5/75 */
}

/* 短信验证部分 */
.res {
  width: 100%;
  height: 0.533333rem /* 40/75 */;
  font-size: 0.24rem /* 18/75 */;
  float: right;
}
/* 去注册 */
.res a {
  display: inline-block;
  color: blue;
}

/* 第三方登录部分 */
.three {
  font-size: 0.4rem /* 30/75 */;
}
</style>
